<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    *{
        margin:0px;
        padding:0px;
    }
    .right_nav{
        width:110px;

        float:left;
        position:fixed;
        right:-80px;
        top:200px;
    }
    .right_nav span{
       float:left;
        transition:all .3s;
        position:absolute;
        z-index:1;
        width: 30px;
        height:30px;
        border-radius: 5px 0px 0px 5px;
    }
    li{
        list-style:none;

    }



    li{
        margin-top:3px;
        position:relative;
        height:30px;


    }
    li:nth-of-type(1) span{
        background:green url(images/toolbars.png)
        no-repeat -3px -18px;
    }
    li:nth-of-type(2) span{
        background:green url(images/toolbars.png)
        no-repeat -3px -58px;
    }
    li:nth-of-type(3) span{
        background:green url(images/toolbars.png)
        no-repeat -3px -108px;
    }
    li:nth-of-type(4) span{
        background:green url(images/toolbars.png)
        no-repeat -3px -158px;
    }
    li:nth-of-type(5) span{
        background:green url(images/toolbars.png)
        no-repeat -3px -202px;
    }
    .right_nav a{
        border-radius: 5px 0px 0px 5px;
        display:block;
       color:white;
        z-index:0;
        position:absolute;
        left:30px;
        top:0px;
        float:right;
        background:green;
        height:30px;
        width:70px;
        padding-left:10px;
        line-height:30px;
       text-decoration:none;
        transition:all .3s;
    }
</style>
</head>
<body>

<ul class="right_nav">
    <li><a href="#">我的关注</a><span></span></li>
    <li><a href="#">我的关注</a><span></span></li>
    <li><a href="#">我的关注</a><span></span></li>
    <li><a href="#">我的关注</a><span></span></li>
    <li><a href="#">我的关注</a><span></span></li>
</ul>
<script src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
<script>
    $(start);

    function start(){
        $("li").mouseover(
            function(){
                $(this).find("a").css("left","-80px");
                $(this).find("span").css("border-radius","0px");
                //$(this).find("a").css("padding-left","10px");
            }
        );

        $("li").mouseout(
            function(){
                $(this).find("a").css("left","30px");
                $(this).find("span").css("border-radius","5px 0px 0px 5px");
              //  $(this).find("a").css("padding-left","0px")
            }
        );
    }
</script>
</body>
</html>